@extends('layout.page')
@section('title','题库管理-创建-系统架构师上午卷子')
@section('stylesheet')
    <link href="/css/plugins/webUploader/webuploader.css" rel="stylesheet">
    <link href="/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
@endsection

@section('static-page')
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>题库管理 <small>添加系统架构师上午卷子</small></h5>
            </div>
            <div class="ibox-content">
                <form method="post" action="/quetionsJg/doCreate" class="form-horizontal" id="form">
                    {{csrf_field()}}
                    <input type="hidden" name="inof[pid]">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题号：</label>
                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col-md-8">
                                    <input type="text"  name="info[No]" value="{{ old('info')['No'] }}"
                                           placeholder="题号" class="form-control"
                                           @if($errors->has('info.title')) has-error @endif">
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>


                    <div class="form-group  ">
                        <label class="col-sm-2 control-label">题目内容：</label>
                        <div class="col-sm-8">
                            <div class="row">
                                <div class="col-md-12">
                                    <textarea type="text" name="info[content]" rows="5" cols="20"
                                              placeholder="题目内容" class="form-control"></textarea>
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>

                    <div class="form-group  ">
                        <div id="uploader-demo">
                            <!--用来存放item-->
                            <div id="fileList" class="uploader-list row">
                                <div style="display: none;" id="imgs-wapper">
                                </div>
                                <div class="col-md-4">
                                    <img class="center-block">
                                    <div class="info text-center"></div>
                                </div>

                            </div>
                            <div id="filePicker">选择图片</div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>

                    <div class="form-group" id="options-wrapper">
                        <div class="text-navy text-center ">
                            <strong>该区块未做验证 请谨慎操作！</strong>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm" type="button"
                                id="_btn-add-question">添加问题</button>
                    </div>
                    <div class="hr-line-dashed"></div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目解析：</label>
                        <div class="col-sm-8">
                            <div class="row">
                                <div class="col-md-12">
                                    <textarea type="text" name="info[analysis]" rows="5" cols="20"
                                              placeholder="题目解析" class="form-control"></textarea>
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">考点章节：</label>
                        <div class="col-sm-10">
                            <div class="row">
                                <div class="col-md-5">

                                    <select name="platform" class="form-control input-s-sm inline">
                                        <option  value="1">第一张</option>
                                        <option  value="1">第一张</option>
                                        <option  value="1">第一张</option>
                                    </select>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">解析标签(考点标签)：</label>
                        <div class="col-sm-10">
                            <div class="row">
                                <div class="col-md-10">
                                    <input type="text"  name="info[tags]" value="{{ old('info')['tags'] }}"
                                           placeholder="解析标签,多个标签','分割 " class="form-control">
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>


                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-2">
                            <button class="btn btn-primary" type="button" id="btn-save">保存内容</button>
                            <a href="javascript:void(0);" onclick="window.history.back()">
                                <button class="btn btn-white" type="button">取消</button>
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div style="display: none;" id="template-block">

        <div class="well _question-wrapper">
            <div class="row">
                <label class="col-sm-2 control-label text-danger">题号：</label>
                <div class="col-md-2">
                    <input type="text" name="question[Q_NUMBER][number]" value=""
                           placeholder="题号" class="form-control">
                    <span class="help-block m-b-none text-warning">题号 数字</span>
                </div>
            </div>
            <div class="row">
                <label class="col-sm-2 control-label text-danger">正确答案：</label>
                <div class="col-md-2">
                    <input type="text" name="question[Q_NUMBER][answer]" value=""
                           placeholder="A" class="form-control">
                    <span class="help-block m-b-none text-warning">正确答案</span>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-warning btn-sm _btn-add-option" data-value="Q_NUMBER" type="button">添加选项</button>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label text-navy">选项：</label>
                <div class="col-sm-10 _options-wrapper">

                </div>

            </div>
        </div>
    </div>

    <div style="display: none;" id="template-block-options">
        <div class="row ">
            <span class="glyphicon glyphicon-hand-right pull-left" aria-hidden="true" ></span>
            <div class="col-md-8">
                <input type="text" name="question[Q_NUMBER][options][]" value=""
                       placeholder="内容" class="form-control">
                <span class="help-block m-b-none"></span>
            </div>
        </div>
    </div>

@endsection

@section('javascript')
    <script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="/js/plugins/jqueryValidate/jquery.validate.js"></script>
    <script src="/js/plugins/webUploader/webuploader.min.js"></script>
    <script src="/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="/js/plugins/layer/laydate/laydate.js"></script>
    <script>
        $(document).ready(function () {

            $("#form").validate({
                rules: {
                    'info[content]': "required",
                    'info[analysis]': "required",
                    'info[No]':{
                        required: true,
                        number: true
                    },
                },
                messages: {
                    'info[content]': "必填项",
                    'info[analysis]': "必填项",
                    'info[No]':{
                        required: "必填项",
                        number: "请输入有效的数字"
                    }
                }
            });

            var quetions_num = 0;
            //添加问题
            $("#_btn-add-question").click(function () {
                var template = $("#template-block").html();
                var temmplate_temp = template.replace(/Q_NUMBER/g,quetions_num);
                $("#options-wrapper").append(temmplate_temp);
                quetions_num++;
            });
            //添加问题选项
            $("#options-wrapper").on("click","._btn-add-option",function(e){
                var questions_number = $(this).data('value');
                var template = $("#template-block-options").html();
                var temmplate_temp = template.replace(/Q_NUMBER/g,questions_number);
                $(this).parents('._question-wrapper').find('._options-wrapper').append(temmplate_temp);

            });

            //webuploader 上传图片
            // 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: false,
                // swf文件路径
                swf: '/js/plugins/webUploader/Uploader.swf',
                // 文件接收服务端。
                server: '/common/files/upload',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
                }
            }).on( 'fileQueued', function( file ) {
                var $li = $('<div class="col-md-4">'+
                        '<img class="center-block">'+
                        '<div class="info text-center">' + file.name + '</div>' +
                        '</div>'),
                        $img = $li.find('img');
                // $list为容器jQuery实例
                $list = $("#fileList");
                $list.append($li);
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, 300, 225);
            }).on('uploadSuccess', function (file, result) {
                console.log(result);
                if (result.code == 1) {
                    var img_src = '<input type="hidden" name="imgs[]" value="'+
                            result.data.src+'">'
                    $("#imgs-wapper").append(img_src);

                    $("#form").submit();
                } else {
                    swal("文件上传失败！", result.message, "error");
                }
            }).on('uploadBeforeSend', function (object, data, headers) {
                headers['X-XSRF-TOKEN'] = $.cookie('XSRF-TOKEN');
                setTimeout(function(){
                    layer.closeAll('loading');
                }, 2000);
                layer.msg('图片上传中', {
                    icon: 16,
                    shade: 0.01
                });
            });

            $('#btn-save').on('click', function () {
                uploader.upload();
            });
        });
    </script>
@endsection

